<template>
  <div class="app-container">

    <u-page title="二维火商户管理">
      <div slot="header">
        <el-button type="primary" icon="el-icon-edit" @click="hdlOpen(newForm)">
          {{ textMap['create'] }}
        </el-button>
      </div>

      <u-filtered>
        <el-form ref="listQuery" :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="二维火店铺名" prop="name">
            <el-input v-model="listQuery.name" placeholder="关键词查询" clearable />
          </el-form-item>
          <el-form-item label="二维火店铺码" prop="code">
            <el-input v-model="listQuery.code" placeholder="关键词查询" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="bmlList">搜索</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>
      <!--商户列表-->
      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="bmlList"
        @selection-change="hdlSelectChange"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="hdlDetail(row)">修改</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>
    </u-page>

    <!--商户详情-->
    <u-dialog :title="textMap[dialogStatus]" :auto-close="false" width="1080px" :show.sync="dialogFormVisible" :visible.sync="innerVisible2" append-to-body @confirm="dialogStatus==='create'?hdlCreate():hdlUpdate()" @cancel="cancel">
      <el-form ref="dialogForm" :model="dataForm" label-width="120px">
        <el-tabs v-model="active">
          <el-tab-pane label="基础信息" name="first">
            <el-descriptions title="部门信息" :column="2" border>
              <el-descriptions-item label="部门代码">
                <el-input v-model="dataForm.deptid" placeholder="请输入商友部门码" clearable show-word-limit maxlength="10" />
                <el-button type="primary" icon="el-icon-edit" @click="getbmryxx()">查询店铺信息</el-button>
              </el-descriptions-item>
              <el-descriptions-item label="店铺名">
                <el-input v-model="dataForm.ewh_DEPT_NAME" placeholder="请输入二维火店铺名" clearable show-word-limit maxlength="10" />
              </el-descriptions-item>
              <el-descriptions-item label="积分倍数">
                <el-input v-model="dataForm.jfbs" placeholder="请输入商友积分倍数" clearable type="number" />默认为0.5
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="商友信息" :column="2" border style="margin-top: 20px">
              <el-descriptions-item label="商友收银账号">
                {{ dataForm.rydm +'('+ dataForm.person_NAME +')' }}
              </el-descriptions-item>
              <el-descriptions-item label="商友商品ID">
                {{ dataForm.spcode }}
              </el-descriptions-item>
              <el-descriptions-item label="二维火收银账号">
                <el-input v-model="dataForm.ewh_RYDM" placeholder="请输入二维火收银账号" clearable />通用为chiconyPerson
              </el-descriptions-item>
              <el-descriptions-item label="二维火商品ID">
                <el-input v-model="dataForm.ewh_SPID" placeholder="请输入二维火商品ID" clearable />通用为chicony
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="收款台信息" :column="2" border style="margin-top: 20px">
              <el-descriptions-item label="收款台号">
                <el-input v-model="dataForm.sktno" placeholder="请输入商友收款台号" clearable type="number" show-word-limit maxlength="3" />
              </el-descriptions-item>
              <el-descriptions-item label="小票号">
                <el-input v-model="dataForm.jlbh" placeholder="请输入商友小票号" clearable type="number" />
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>

          <el-tab-pane label="收款方式列表" name="second">
            <el-button type="primary" icon="el-icon-edit" @click="hdlOpen2(newForm2)">
              {{ textMap2['create'] }}
            </el-button>
            <!--收款方式列表-->
            <u-table
              :data="paylist"
              :loading="listLoading2"
              :options="listOptions2"
              :columns="columns3"
              :pagination.sync="listQuery2"
              :fetch="paylList"
              @selection-change="hdlSelectChange"
            >
              <template v-slot:right>
                <el-table-column label="操作" align="center" fixed="right">
                  <template slot-scope="{ row }">
                    <el-button type="text" @click="hdlEdit(row)">修改</el-button>
                  </template>
                </el-table-column>
              </template>
            </u-table>
          </el-tab-pane>
        </el-tabs>
      </el-form>

      <!--商户商品选择-->
      <u-dialog :footer="false" :title="title2" :show.sync="dialogFormVisible2" :visible.sync="innerVisible" append-to-body @cancel="cancel2">
        <el-form ref="dialogForm2" :rules="rules" :model="paylist" label-width="120px">
          <el-tabs v-model="active">
            <u-table
              :data="bmlist"
              :columns="columns2"
              @selection-change="hdlSelectChange"
            >
              <template v-slot:right>
                <el-table-column label="操作" align="center" fixed="right">
                  <template slot-scope="{ row }">
                    <el-button type="text" @click="selectbmsp(row)">选择</el-button>
                  </template>
                </el-table-column>
              </template>
            </u-table>
          </el-tabs>
        </el-form>
      </u-dialog>

      <!--商户收款方式编辑-->
      <u-dialog :footer="false" width="980px" :title="textMap2[dialogStatus2]" :show.sync="dialogFormVisible3" :visible.sync="innerVisible2" append-to-body @cancel="cancel3" @confirm="dialogStatus2==='create'?hdlCreate2():hdlUpdate2()">
        <el-form ref="dialogForm3" label-width="120px">
          <el-descriptions title="" :column="1" border>
            <el-descriptions-item label="二维火收款方式码">
              <el-input v-model="dataForm2.ewh_CODE" placeholder="请输入二维火收款方式码" clearable />
            </el-descriptions-item>
            <el-descriptions-item label="商友收款方式">
              <el-select v-model="dataForm2.code" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-descriptions-item>
          </el-descriptions>
        </el-form>
        <div class="flex-container">
          <el-button @click="cancel3()">取消</el-button>
          <el-button type="primary" @click="dialogStatus2==='create'?hdlCreate2():hdlUpdate2()">确认</el-button>
        </div>
      </u-dialog>
    </u-dialog>
  </div>
</template>
<script>

export default {
  data() {
    return {
      api: this.$u.api.ShangyouErwh,
      // 表格
      columns: [
        {
          prop: 'ewh_DEPT_NAME',
          label: '二维火商户名'
        },
        {
          prop: 'ewh_DEPTID',
          label: '二维火商户号'
        },
        {
          prop: 'deptid',
          label: '商友部门码'
        }
      ],
      columns2: [
        {
          prop: 'ewh_dept_name',
          label: '二维火商户号'
        },
        {
          prop: 'sp_id',
          label: '二维收款方式码'
        }
      ],
      columns3: [
        {
          prop: 'ewh_DEPTID',
          label: '二维火商户号'
        },
        {
          prop: 'ewh_CODE',
          label: '二维收款方式码'
        },
        {
          prop: 'name',
          label: '商友收款方式'
        }
      ],
      columns4: [],
      title: '查看详情',
      title2: '选择商品',
      title3: '选择收款方式',
      list: [],
      listLoading: true,
      listLoading2: true,
      listOptions: {
        mutiSelect: false, // boolean 是否多选
        stripe: true // boolean 斑马纹
      },
      listOptions2: {
        mutiSelect: false, // boolean 是否多选
        stripe: true // boolean 斑马纹
      },
      active: 'first',
      listQuery: {
        pageNumber: 1,
        pageSize: 10,
        totalCount: 1,
        floor: '',
        status: ''
      },
      listQuery2: {
        pageNumber: 1,
        pageSize: 10,
        totalCount: 1,
        ewh_CODE: '',
        ewh_dept_name: ''
      },
      bmlist: [],
      sylist: [
        {
          code: '',
          name: ''
        }
      ],
      paylist: [
        {
          ewh_CODE: '',
          ewh_DEPTID: '',
          code: '',
          name: ''
        }
      ],
      innerVisible: false,
      innerVisible2: false,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      textMap: {
        update: '编辑商户',
        create: '新增商户'
      },
      textMap2: {
        update: '编辑收款方式',
        create: '新增收款方式'
      },
      dialogStatus: '',
      dialogStatus2: '',
      dataForm: {},
      dataForm2: {},
      rules: {

      },
      // 删除选中数据
      selectData: [],
      newForm: {
        status: true
      },
      newForm2: {
        status: true
      },
      options: [
        {
          code: '',
          name: ''
        }],
      code: ''
    }
  },
  created() {
    this.bmlList()
    this.sypaylist()
  },
  methods: {
    bmlList() {
      const self = this
      // 打开加载状态
      self.listLoading = true
      if (self.listState) {
        // 查询列表数据
        self.api.bmlist(self.listQuery).then(res => {
          // 获取列表数据
          self.list = res.data
          // 关闭加载状态
          setTimeout(() => {
            self.listLoading = false
          }, 0.5 * 1000)
        })
      } else {
        // 查询分页数据
        self.api.bmlist(self.listQuery).then(res => {
          // 获取分页列表数据
          self.list = res.data.list
          // 获取分页数据,总页数
          self.listQuery.totalCount = res.data.totalCount
          // 关闭加载状态
          setTimeout(() => {
            self.listLoading = false
          }, 0.5 * 1000)
        })
      }
    },
    hdlOpen(row) {
      const self = this
      // 初始化数据源
      self.dataForm = Object.assign({}, row)
      self.paylList()
      // 打开新增状态.dataForm
      self.dialogStatus = 'create'
      self.dataForm.ewh_RYDM = 'chiconyPerson'
      self.dataForm.ewh_SPID = 'chicony'
      self.dataForm.jfbs = 0.5
      self.dataForm.jlbh = 1000000
      // 打开弹框状态
      self.dialogFormVisible = true
    },
    hdlOpen2(row) {
      const self = this
      self.options = []
      self.sylist.forEach(syItem => {
        const newItem = { code: syItem.code, name: syItem.name + '|' + syItem.code }
        self.options.push(newItem)
      })
      // 初始化数据源
      self.dataForm2 = Object.assign({}, row)
      // 打开编辑状态
      self.dialogStatus2 = 'create'
      // 打开弹框状态
      self.dialogFormVisible3 = true
      // 清除表单验证状态
      self.$nextTick(() => {
        self.$refs['dialogForm'].clearValidate()
      })
    },
    hdlDetail(row) {
      const self = this
      // 初始化数据源
      self.dataForm = Object.assign({}, row)
      self.paylList()
      // 打开新增状态
      self.dialogStatus = 'update'
      // 打开弹框状态
      self.dialogFormVisible = true
    },
    sypaylist() {
      const self = this
      self.api.sypaylist(self.dataForm).then(res => {
        self.sylist = res.data
      })
    },
    paylList() {
      const self = this
      // 打开加载状态
      self.listLoading2 = true
      self.listQuery2.ewh_DEPTID = self.dataForm.ewh_DEPTID
      if (self.listState) {
        // 查询列表数据
        self.api.paylist(self.listQuery2).then(res => {
          // 获取列表数据
          self.paylist = res.data
          self.paylist.forEach(item => {
            self.sylist.forEach(syItem => {
              if (item.code === syItem.code) {
                item.name = syItem.name
              }
            })
          })
          // 关闭加载状态
          setTimeout(() => {
            self.listLoading2 = false
          }, 0.5 * 1000)
        })
      } else {
        // 查询分页数据
        self.api.paylist(self.listQuery2).then(res => {
          // 获取分页列表数据
          self.paylist = res.data.list
          self.paylist.forEach(item => {
            self.sylist.forEach(syItem => {
              if (item.code === syItem.code) {
                item.name = syItem.name
              }
            })
          })
          // 获取分页数据,总页数
          self.listQuery2.totalCount = res.data.totalCount
          // 关闭加载状态
          setTimeout(() => {
            self.listLoading2 = false
          }, 0.5 * 1000)
        })
      }
    },
    getbmryxx() {
      const self = this
      self.api.bmRyxxlist(self.dataForm).then(res => {
        self.bmlist = res.data
        // 获取列表数据
        var x = res.data.length
        if (x > 1) {
          self.openModal()
        } else if (x === 1) {
          res.data.forEach(item => {
            self.dataForm.rydm = item.rydm
            self.dataForm.person_ID = item.person_id
            self.dataForm.person_NAME = item.person_name
            self.dataForm.sp_ID = item.sp_id
            self.dataForm.spcode = item.spcode
            self.dataForm.bmid = item.bmid
            self.dataForm.ewh_DEPT_NAME = item.ewh_dept_name
          })
        } else {
          console.log('000000')
          self.$u.msg('未查询到正常部门信息')
        }
      })
    },
    openModal() {
      this.dialogFormVisible2 = true
    },
    selectbmsp(row) {
      const self = this
      self.dataForm.rydm = row.rydm
      self.dataForm.person_ID = row.person_id
      self.dataForm.person_NAME = row.person_name
      self.dataForm.sp_ID = row.sp_id
      self.dataForm.spcode = row.spcode
      self.dataForm.bmid = row.bmid
      self.dataForm.ewh_DEPT_NAME = row.ewh_dept_name
      this.dialogFormVisible2 = false
    },
    hdlCreate() {
      const self = this
      // 效验数据格式
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          // 提交创建数据
          self.api.bmcreate(self.dataForm).then(() => {
            // 刷新数据列表
            self.bmlList()
            // 关闭弹窗状态
            self.dialogFormVisible = false
            // 通知信息
            self.$u.msg('创建成功')
          })
        }
      })
    },
    hdlUpdate() {
      const self = this
      // 效验数据格式
      self.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          console.log(self.dataForm)
          // 提交更新数据
          self.api.bmupdate(self.dataForm).then(() => {
            // 刷新数据列表
            self.bmlList()
            // 关闭弹窗状态
            self.dialogFormVisible = false
            self.$emit('changeShow', false)
            self.$emit('cancel')
            // 通知信息
            self.$u.msg('更新成功')
          })
        }
      })
    },
    hdlCreate2() {
      const self = this
      self.dataForm2.ewh_DEPTID = self.dataForm.ewh_DEPTID
      // 效验数据格式
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          console.log('self.dataForm2->', self.dataForm2)
          // 提交创建数据
          self.api.paycreate(self.dataForm2).then(() => {
            // 刷新数据列表
            self.paylList()
            // 关闭弹窗状态
            self.dialogFormVisible3 = false
            // 通知信息
            self.$u.msg('创建成功')
          })
        }
      })
    },
    hdlUpdate2() {
      const self = this
      // 效验数据格式
      self.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          console.log('self.dataForm2->', self.dataForm2)

          // 提交更新数据
          self.api.payupdate(self.dataForm2).then(() => {
            // 刷新数据列表
            self.paylList()
            // 关闭弹窗状态
            self.dialogFormVisible3 = false
            self.$emit('changeShow', false)
            self.$emit('cancel')
            // 通知信息
            self.$u.msg('更新成功')
          })
        }
      })
    },
    hdlEdit(row) {
      const self = this
      self.options = []
      self.sylist.forEach(syItem => {
        const newItem = { code: syItem.code, name: syItem.name + '|' + syItem.code }
        self.options.push(newItem)
      })
      // 初始化数据源
      self.dataForm2 = Object.assign({}, row)
      // 打开编辑状态
      self.dialogStatus2 = 'update'
      // 打开弹框状态
      self.dialogFormVisible3 = true
      // 清除表单验证状态
      self.$nextTick(() => {
        self.$refs['dialogForm'].clearValidate()
      })
    },
    cancel() {
      this.dialogFormVisible = false
    },
    cancel2() {
      this.dialogFormVisible2 = false
    },
    cancel3() {
      this.dialogFormVisible3 = false
    }
  }
}
</script>
<style>
.grid-container {
  display: grid;
  place-items: center; /* 同时实现水平和垂直居中 */
  height: 100vh; /* 例如，使容器高度为视口高度 */
}
.centered-div {
  /* 你可以在这里添加更多的样式 */
}

.flex-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 10vh; /* 例如，使容器高度为视口高度 */
}
</style>
